<!DOCTYPE html>  
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Content-Language" content="utf-8" />
		<meta name="author" content="gezg" />
		<title>Dynrow</title>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<link rel="stylesheet" type="text/css" href="css/prism.css">
	</head>
	<body>
		<div class="header">
			<div class="header-inner">
				<nav id="nav-menu">
					<ul>
						<li><h2><a href="#" onclick="clearOne();">清空第一个table</a></h2></li>
						<li><h2><a href="#" onclick="clearTwo();">清空第二个table</a></h2></li>
						<li><h2><a href="#" onclick="clearThree();">清空第三个table</a></h2></li>
					</ul>
				</nav>
			</div>
		</div>
		<div class="container">
			<button class="btn" onclick="addOneRow();">第一table添加一行</button>
			<button class="btn" onclick="getRow();">获取第一个table最后一行</button>
			<SPAN style="margin-left:20px; color:#69689B;">Dynrow依赖于jQuery</SPAN>
			<div class="hbr"><span></span></div>
			<div class="row-fluid">
				<h3 style="text-align: center;margin-bottom: 10px;font-size: 20px;">
				Dynrow动态添加行调用</h3>
				<table class="table" id="testTable">
					<tr id="tmpl1-tr-id">
						<td style="width:25%;" class="range meta">学生姓名</td>
						<td style="width:20%;" class="range meta">年龄</td>
                        <td class="range meta">班级</td>
						<td class="range" style="width: 100px;"><a href="#" name="tmpl1" class="btn btn-primary" data-table="dynrow">添加</a></td>
					</tr>
				</table>
				<div class="hbr"><span></span></div>
				<form id="formTest">
					<table class="table" id="testTable2">
						<tr id="tmpl1-tr-id">
							<td style="width:25%;" class="range meta">学生姓名</td>
							<td style="width:20%;" class="range meta">年龄</td>
	                        <td class="range meta">班级</td>
							<td class="range" style="width: 100px;"><a href="#" name="tmpl1" class="btn btn-primary" data-table="dynrow">添加</a></td>
						</tr>
					</table>
				</form>
				<section style="margin-top:10px;">
					<button class="btn" onclick="threeAddRow();">第三个添加一行</button>
					<button class="btn" onclick="threeDeleteRow();">第三个删除一行</button>
				</section>
				<div class="hbr"><span></span></div>
					<table class="table" id="testTable3">
						<tr>
							<td style="width:20%;" rowspan="2" data-table='rowspan'>如果有跨列的情况<br/>需要在这个跨列的<br/>td上添加上<br/><span class="text-green">data-table='rowspan'</span><br/>属性</td>
	                        <td style="width:20%;" class="range meta">学生姓名</td>
	                        <td style="width:20%;" class="range meta">年龄</td>
	                        <td style="width:20%;" class="range meta">班级</td>
						</tr>
						<tr id="tmpl3-tr-id">
	                        <td style="width:20%;" class="text-left">
	                        	<input type="text" value="刘德华"/>
	                        </td>
	                        <td style="width:20%;"><input type="text" value="50"/></td>
	                        <td style="width:20%;"><input type="text" value="二班"/></td>
						</tr>
					</table>
				<div class="hbr"><span></span></div>
				<table class="table">
					<thead>
						<tr>
							<th style="width:17%;">参数名称</th>
							<th style="width:13%;">默认值</th>
							<th style="width:10%;">是否必填</th>
							<th style="width:60%;">说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>tmplId</td>
							<td>无</td>
							<td><span class="text-red">是</span></td>
							<td>模版id</td>
						</tr>
						<tr>
							<td>addNextId</td>
							<td>无</td>
							<td>否</td>
							<td>这个id写在哪就在哪里向下添加行
								<br />
								<span class="text-red">PS：ID写在必须写在TR元素上</span>
							</td>
						</tr>
						<tr>
							<td>params</td>
							<td>无</td>
							<td>否</td>
							<td>传递给模版的参数 <span class="text-green">注*模版也可以直接读取javascript中的变量</span></td>
						</tr>
						<tr>
							<td>reference</td>
							<td>d</td>
							<td>否</td>
							<td>获取模版的对象例如传参daa 那么在模版中就用daa.id取值<br />
							<span class="text-red">PS：参数的值一定要和模版上的一致</span>
							</td>
						</tr>
						<tr>
							<td>deflutOne</td>
							<td>true</td>
							<td>否</td>
							<td>默认添加一行</td>
						</tr>
						<tr>
							<td>deleteLast</td>
							<td>true</td>
							<td>否</td>
							<td>是否可以删除最后一行（仅限于本插件添加上的行，默认写在页面上的本功能无效）</td>
						</tr>
						<tr>
							<td>position</td>
							<td>false</td>
							<td>否</td>
							<td>控制向addNextId参数的上面还是下面添加行，默认false向下添加</td>
						</tr>
						<tr>
							<td>fnAdd</td>
							<td>无</td>
							<td>否</td>
							<td>添加行的回调函数 每添加一行触发一次 <span class="text-green">返回当前行html</span></td>
						</tr>
						<tr>
							<td>fnDel</td>
							<td>无</td>
							<td>否</td>
							<td>删除行的回调函数 每删除一行触发一次  <span class="text-green">返回当前剩余行数</span></td>
						</tr>
						<tr>
							<td>fnDelBrfore</td>
							<td>无</td>
							<td>否</td>
							<td>删除行之前触发 <span class="text-green">返回当前行的jQuery对象</span></td>
						</tr>
						<tr>
							<td>selector</td>
							<td>[data-table='dynrow']</td>
							<td>否</td>
							<td>table内添加按钮选择器例：<br /><span class="text-green">&lt;a href="#" class="btn" data-table="dynrow"&gt;添加&lt;/a&gt;</span>
								<br /><span class="text-red">PS：选择器只在当前table范围内查找，如需在在外部使用添加行请使用实例化对象调用addRow方法</span>
							</td>
						</tr>
						<tr>
							<td>checkRow</td>
							<td>[data-table='rowspan']</td>
							<td>否</td>
							<td>检查单元格是否含有跨列rpwspan的selector 值为false则不检查
							<br /><span class="text-red">PS：选择器只在当前table范围内查找</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="hbr"><span></span></div>

			<section>
                <div>
                    <span class="text-red">JAVASCRIPT 初始化代码</span>
                </div>
                <pre>
<code class="language-javascript">var table = new Dynrow("testTable",{
    tmplId     : "tableTmpl",	//模版id					    必填
    addNextId: "tmpl-tr-id",//tr的id从这行开始追加行数    选填
    params   : {			//模版参数					选填
        id     : "auto-tr-id",
        klass  : "matter",
        tds    : {
            id     : "auto-td",
            name   : "auto-td-name"
        }
    },
    reference  : null,
    deflutOne: true,		//是否默认添加一行			选填
    deleteLast: true,		//是否可以删除一行不剩		选填
    //检查单元格是否含有跨列rpwspan的selector			    选填
    checkRow  : "[data-table='rowspan']", 
    fnAdd : function (html) {
        //@param html [type=dom] 当前添加上的这行html
        indexId++;			//添加按钮的元素上必须要有data-table='dynrow'属性
    },
    fnDel:function(len){
    	//@param len [type=number] 剩余行数
    	if(len == 0){		//删除按钮的元素上必须要有delete样式 class="delete"
    		alert("都删除没了");
    	}
    },
    fnDelBefore:function($tr){
    	//当前删除行的jQuery对象
    	//console.log($tr);
    }
});

//添加一行
table.add();

/**
*  删除一行
*  如不填写index值则删除最后一行
*/
table.del(index);
//清空所有行
table.delAll();
/**
*  获取行的dom对象 
*  如不填写index值则返回最后一行，如没有值则返回undefined
*/
table.getRow(index);
</code>
                </pre>
            </section>
            <section>
                <div>
                  
                    <span class="text-red">HTML 第二个table的模版代码</span>
                </div>
                <pre><code class="language-javascript">&lt;script id="tableTmpl" type="text/x-jquery-tmpl"&gt;
	&lt;tr&gt;
		&lt;td&gt;&lt;input type="text" name="data[{{ indexId}}].myName"/&gt;&lt;/td&gt;
		&lt;td&gt;&lt;input type="text" name="data[{{ indexId}}].myAge"/&gt;&lt;/td&gt;
	    &lt;td&gt;&lt;input type="text" name="data[{{ indexId}}].myGroup"/&gt;&lt;/td&gt;
		&lt;td&gt;&lt;a href="#" class="btn btn-error delete"&gt;删除&lt;/a&gt;&lt;/td&gt;
	&lt;/tr&gt;
&lt;/script&gt;
       </code></pre></section>
		</div>
		<div class="footer hide">
			 版权所有：长春嘉诚网络工程有限公司
		</div>
		<script id="tableTmpl" type="text/html">
            <tr>
				<td><input type="text" name="data[{{ indexId}}].myName"/></td>
				<td><input type="text" name="data[{{ indexId}}].myAge"/></td>
	            <td><input type="text" name="data[{{ indexId}}].myGroup"/></td>
				<td><a href="#" class="btn btn-error delete">删除</a></td>
			</tr>
        </script>

        <script id="tableTmpl3" type="text/html">
            <tr>
                <td style="width:20%;" class="text-left">
                	<input type="text"/>
                </td>
                <td style="width:20%;"><input type="text"/></td>
                <td style="width:20%;"><input type="text"/></td>
			</tr>
        </script>
        <script type="text/javascript" src="js/util/jquery.min.js"></script>
        <script type="text/javascript" src="js/dynrow.js"></script>
        <script type="text/javascript" src="js/util/prism.js"></script>
        <script type="text/javascript">
			var indexId = 0,
				tplRow1,
				tplRow2,
				tplRow3;
			$(document).ready(function(){
				tplRow1 = new Dynrow("testTable",{
				    tmplId    : "tableTmpl",
				    deleteLast: false
				});

				tplRow2 = new Dynrow("testTable2",{
				    tmplId     : "tableTmpl",	//模版id					必填
				    addNextId: "tmpl1-tr-id",//tr的id从这行开始追加行数 选填
				    params   : {			//模版参数					选填
		                id     : "auto-tr-id",
		                klass  : "matter",
		                tds    : {
		                    id     : "auto-td",
		                    name   : "auto-td-name"
		                }
		            },
		            reference : null,
		            deflutOne : true,		//是否默认添加一行			选填
		            deleteLast: true,		//是否可以删除一行不剩		选填
		            checkRow  : "[data-table='rowspan']", //检查单元格是否含有跨列rpwspan的selector
		            fnAdd : function (html) {
		                indexId++;
		            },
		            fnDel:function(len){
		            	if(len == 0){
		            		alert("都删除没了");
		            	}
		            },
		            fnDelBefore:function($tr){
		            	//console.log($tr);
		            }
				});

				tplRow3 = new Dynrow("testTable3",{
				    tmplId    : "tableTmpl3",
		            fnDel:function(len){
		            	if(len == 0){
		            		alert("就剩下一行了，还删啊？");
		            	}
		            }
				});
			});

			function clearOne(){
				tplRow1.delAll();
			}

			function clearTwo(){
				tplRow2.delAll();
			}

			function clearThree(){
				tplRow3.delAll();
			}

			function addOneRow(){
				tplRow1.add();
			}

			function threeAddRow(){
				tplRow3.add();
			}

			function threeDeleteRow(){
				tplRow3.del();
			}

			function getRow(){
				var dom = tplRow1.getRow();
				if(window.console && console.log)console.log(dom);
			}

		</script>
		<a href="https://gitee.com/1005/dynrow" class="forkme" id="forkme">Fork me on Gitee</a>
	</body>
</html>
